import React, { useState, useEffect } from 'react'
import { Table, Button, Space } from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { getProlist } from '../../api/pro'

const Prolist = () => {
  
  const [ prolist, setProlist ] = useState([])
  const [ current, setCurrent ] = useState(1)
  const [ pageSize, setPageSize ] = useState(10)

  useEffect(() => {
    async function fetchData () {
      const res = await getProlist()
      setProlist(res.data.data)
    }
    fetchData() 
  }, [])  

  const columns = [
    {
      title: '序号',
      align: 'center',
      render: (text, record, index) =>{
        return (<span>{(current - 1) * pageSize + index + 1}</span>)
      }
    },
    {
      title: '产品名称',
      dataIndex: 'proname',
      align: 'center',
      width: 300,
      filters: [
        {
          text: '手机',
          value: '手机'
        },
        {
          text: '零食',
          value: '零食'
        },
        {
          text: '电脑',
          value: '电脑'
        }
      ],
      onFilter: (value, record) => record.proname.indexOf(value) !== -1 
    },
    {
      title: '产品图片',
      dataIndex: 'proimg',
      align: 'center',
      render: (text, record, index) => {
        return (<img src={text} alt="" style={{ width:80, height:80}}/>)
      }
    },
    {
      title: '产品价格',
      dataIndex: 'price',
      align: 'center',
      sorter: (a, b) => a.price - b.price
    },
    {
      title: '产品销量',
      dataIndex: 'sales',
      align: 'center',
      sorter: (a, b) => a.sales - b.sales
    },
    {
      title: '操作',
      align: 'center',
      render: (text, record, index) => {
        return (
          <Space>
            <Button type="primary" shape="circle" icon={<EditOutlined/>}></Button>
            <Button type="primary" danger shape="circle" icon={<DeleteOutlined/>}></Button>
          </Space>
        )
      }
    }
  ]
  
  return (
    <Table columns={columns} dataSource={prolist} rowKey={(record) => record.proid} 
      pagination={{
        position: ['bottomLeft'],
        defaultCurrent: current,
        defaultPageSize: pageSize,
        onChange: (page, pageSize) => {
          setCurrent(page)
        },
        onShowSizeChange: (current, size) => {
          setPageSize(size)
        }
      }}
    />
  )
}



export default Prolist